<template>
  <van-row v-if="user">
    <van-col :span="24" style="margin-top: 20px;">
      <!-- 用户头像信息 -->
      <div id="userInfo" style="margin-top: 20px;">
        <!-- <img
          style="width:100px;height:100px"
          :src="user.userImg"
        /> -->
        <img src="../assets/zxc.jpg" style="width:100px;height:100px;border-radius: 25px;margin-left: 50px;"/>
        <h1 style="margin-right: 50px;">{{user.userName}}</h1>
      </div>
    </van-col>
  </van-row>
  <van-row v-else>
    <van-col :span="24">
      <van-button type="primary" @click="toLogin">去登录</van-button>
    </van-col>
  </van-row>
  <!-- 展示 -->
   <!-- 弹幕 -->
   <van-barrage v-model="list" auto-play>
      <div class="video" style="width: 100%; height: 150px"></div>
   </van-barrage>
   <van-space style="margin-top: 10px">
      <van-button @click="add" type="primary" size="small"> 欢迎光临 </van-button>
   </van-space>
   <!-- 退出 -->
   <van-button type="primary" block to="/login" style="margin-top: 200px;">退出登录</van-button>
   <!-- 助力 -->
  <van-floating-panel :content-draggable="false">
    <div style="text-align: center; padding: 15px">
      <p>重要信息！！！</p>
      <van-text-ellipsis :content="text" expand-text="展开" collapse-text="收起" />
      <img src="../assets/v50.jpg" style="width:200px;height:200px;border-radius: 25px;"/>
    </div>
  </van-floating-panel>
</template>

<script setup>
import { onMounted, ref , getCurrentInstance } from "vue";

const user = ref(null);
const text =
      '我曾经出门比赛，Beat随便放，两分钟干趴下十几个rapper，吓得DJ跑路，评委失踪，无论是逻辑， Flow，还是韵脚都令无数rapper闻风丧胆!但现在我为何退出江湖，归隐深山?Freestyle半天没一句话!是什么让我改变如此之大!?是仇恨?还是爱情?拿起你的手机，扫描下方二维码V我50！助我东山再起！ ​';

const defaultList = [
{ id: 100, text: '666' },
{ id: 101, text: '美丽' },
{ id: 102, text: '大方' },
{ id: 103, text: '优雅' },
{ id: 104, text: '帅气' },
{ id: 105, text: '低调' },
{ id: 106, text: '有内涵' },
];

const list = ref([...defaultList]);
const add = () => {
list.value.push({ id: Math.random(), text: '您好！欢迎光临' });
};

const {proxy} = getCurrentInstance();



const toLogin = ()=>{
  proxy.$router.push('/login');
}



onMounted(()=>{
  let userJson = window.localStorage.getItem("loginUser");
  if(userJson){
    user.value = JSON.parse(userJson);
    user.value.userImg = ref("../assets/zxc.jpg")

  }
})
</script>

<style>
#userInfo{
  display: flex;
  justify-content: space-between;
}
</style>